<script setup>

const order = JSON.parse(sessionStorage.getItem('finalOrder'))
console.log(order)
const tableData = ref(order.lineItems)
console.log(tableData)

// let subTotal = ref(0)
// let order = reactive({
//     cardType:'',
//     creditCard:'',
//     // expiryDate:'',
//     billToFirstName:'',
//     billToLastName:'',
//     billAddress1:'',
//     billAddress2:'',
//     billCity:'',
//     billState:'',
//     billZip:'',
//     billCountry:'',
//     shipToFirstName:'',
//     shipToLastName:'',
//     shipAddress1:'',
//     shipAddress2:'',
//     shipCity:'',
//     shipState:'',
//     shipZip:'',
//     shipCountry:'',
//     orderDate:'',
//     totalPrice:''
// })

// let tableData = ref([])

// order.orderId=Math.ceil(Math.random()*10000)
// order.orderNum=Math.ceil(Math.random()*10000)
// order.orderDate=Date()
// order.exprdate=Date()
// order.locale="someWhere"
// alert(JSON.stringify(order))

// const newOrder = (async (order)=>{
// //   alert(JSON.stringify(order))
//   const [res,err] = await OrderService.promise_process(OrderService.addOrder(order))
//   if(err){
//     console.log(err)
//     ElMessage({
//       message: '请求服务器失败',
//       type: 'error',
//     })
//   }
//   if(res){
//     // alert("success add new Order")
//   }
// })

// const init = (()=>{
//     order = JSON.parse(sessionStorage.getItem("order"))
//     console.log(order)
//   newOrder(order)

//   let itemList_temp = sessionStorage.getItem("itemList")
//   let itemList = JSON.parse(itemList_temp)
//   tableData.value = itemList
//   subTotal.value = sessionStorage.getItem("subTotal")
// })
onMounted(()=>{

})
</script>

<template>
<top/>
    <br><br><br>
<!--    <div id="BackLink">-->
<!--        <router-link to="/home">Return to Main Menu</router-link>-->
<!--    </div>-->
    <div style="font-weight: 800">感谢您的配合，您的订单已发放。</div>
<el-card style="z-index: -1">
    <template #header>
        <div style="font-weight: 800">
            Order #{{order.orderNum}}
            <br>{{order.orderDate}}
        </div>
    </template>
    <el-descriptions title="Payment Details" :column="1" border>
        <el-descriptions-item label="Card Type:">{{order.cardType}}</el-descriptions-item>
        <el-descriptions-item label="Card Number:">{{order.creditCard}}</el-descriptions-item>
        <el-descriptions-item label="Expiry Date (MM/YYYY):">{{order.orderDate}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="Billing Address" :column="1" border>
        <el-descriptions-item label="First name:">{{order.billToFirstName}}</el-descriptions-item>
        <el-descriptions-item label="Last name:">{{order.billToFirstName}}</el-descriptions-item>
        <el-descriptions-item label="Address 1:">{{order.billAddress1}}</el-descriptions-item>
        <el-descriptions-item label="Address 2:">{{order.billAddress2}}</el-descriptions-item>
        <el-descriptions-item label="City:">{{order.billCity}}</el-descriptions-item>
        <el-descriptions-item label="State:">{{order.billState}}</el-descriptions-item>
        <el-descriptions-item label="Zip:">{{order.billZip}}</el-descriptions-item>
        <el-descriptions-item label="Country:">{{order.billCountry}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="Shipping Address" :column="1" border>
        <el-descriptions-item label="First name:">{{order.shipToFirstName}}</el-descriptions-item>
        <el-descriptions-item label="Last name:">{{order.shipToLastName}}</el-descriptions-item>
        <el-descriptions-item label="Address 1:">{{order.shipAddress1}}</el-descriptions-item>
        <el-descriptions-item label="Address 2:">{{order.shipAddress2}}</el-descriptions-item>
        <el-descriptions-item label="City:">{{order.shipCity}}</el-descriptions-item>
        <el-descriptions-item label="State:">{{order.shipState}}</el-descriptions-item>
        <el-descriptions-item label="Zip:">{{order.shipZip}}</el-descriptions-item>
        <el-descriptions-item label="Country:">{{order.shipCountry}}</el-descriptions-item>
    </el-descriptions>
    <el-table
        :data="tableData"
        height="200"
        style="width: 100%"
    >
        <el-table-column prop="itemId" label="itemID"></el-table-column>
        <el-table-column prop="item.attribute1" label="描述" min-width="150"></el-table-column>
        <el-table-column prop="quantity" label="数量" ></el-table-column>
        <el-table-column prop="unitPrice" label="单价" ></el-table-column>
        <el-table-column prop="totalPrice" label="总价格" >
            <template #default="scope">
                {{ scope.row.unitPrice * scope.row.quantity }}
            </template>
        </el-table-column>
    </el-table>
    <el-row :gutter="0">
    <el-col :span="8" :offset="8">
        <div>合计共：￥{{order.totalPrice}}</div>
    </el-col>
    </el-row>
</el-card>
    <br><br><br><br>
<bottom />
</template>

<style scoped>
#BackLink{
    position: relative;
    border-top: solid blue;
    border-bottom: solid blue;
    width: 20%;
    height: 50px;
    float: right;
    /*以下3个令文字处于div块正中央，webkit兼容Chrome*/
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
}

.el-card{
    width: 600px;
}
.el-descriptions {
    margin-top: 20px;
}
.cell-item {
    display: flex;
    align-items: center;
}
</style>
